<!DOCTYPE HTML>
<html>
<head>
  <title>Home</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link href="css/style.css" rel="stylesheet" type="text/css"  media="all" />
  <link href="css/slider.css" rel="stylesheet" type="text/css"  media="all" />
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/camera.min.js"></script>
  <script type="text/javascript" src="js/jquery.lightbox.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/gghc.js"></script>
  <link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />

	  <script type="text/javascript">
		  $(function() {
			$('.gallery a').lightBox();
		  });

	  </script>
 </head>
  <body>
<div id="app">
<my-header></my-header>
	       <!--start-image-slider---->
			    <div class="slider">
					<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">

<!--							<div data-src="https://ali.xinshipu.cn/20160408/original/1460127519450.jpg">  </div>-->
<!--							<div data-src="https://ali.xinshipu.cn/20120624/original/1340467941007.jpg@288w_216h_99q_1e_1c.jpg">  </div>-->
<!--							<div data-src="https://ali.xinshipu.cn/20160527/original/1464344311565.jpg@288w_216h_50q_1e_1c.jpg">  </div>-->
<!--							<div data-src="https://ali.xinshipu.cn/20140904/original/1409798278381.jpg@288w_216h_99q_1e_1c.jpg">  </div>-->

						<div v-for="c in dish" :data-src="c.image" data-portrait="ture" ></div>
					</div>
					<div class="clear"> </div>					       
				</div>
         <!--End-image-slider---->
		 <!---start-content---->
		 <div class="content">
		 	<div class="top-grids">
		 		<div class="wrap">
			 		<div class="top-grid">
			 			<a href="#"><img src="images/icon1.png" title="icon-name"></a>
			 			<h3>广告招租</h3>
			 			<p>广告招租，请联系我们 </p>
						<p>QQ:654536829 </p>
			 			<a class="button" href="about.html">联系我们</a>
			 		</div>
			 		<div class="top-grid">
			 			<a href="#"><img src="images/icon2.png" title="icon-name"></a>
			 			<h3>我们的服务</h3>
			 			<p> 网站题材以 大众、简单、实用的定位，为广大网友提供家常菜谱，特色菜谱等美食做法，力求给喜爱美食及菜谱的朋友们提供一个开放的平台  </p>
			 			<a class="button" href="about.html">菜品分类</a>
			 		</div>
			 		<div class="top-grid last-topgrid">
			 			<a href="#"><img src="images/icon3.png" title="icon-name"></a>
			 			<h3>广告招租</h3>
						<p>广告招租，请联系我们 </p>
						<p>QQ:654536829 </p>
			 			<a class="button" href="contact.html">联系我们</a>
			 		</div>
			 		<div class="clear"> </div>
		 		</div>
		 	</div>
		 	<div class="mid-grid">
		 		<div class="wrap">
			 		<h1>欢迎来到我们的网站!</h1>
			 		<h2>本网站为用户提供菜谱交流平台</h2>
			 		<p>嘎嘎好吃菜谱网创建于2022年5月，是一个分享美食做法的菜谱网站。囊括了全国各地、各种口味、各种风情的家常菜谱、特色菜谱等菜谱大全，通过这里的每一道菜谱你可以在家中尽情的做出属于自己的拿手好菜！ </p>
			 		<a class="button1" href="about.html">菜品分类</a>
		 		</div>
		 	</div>
		 	<div class="bottom-grids">
							<div class="wrap">
								<div class="bottom-grid1"  id="hot">
									<h3>最热菜谱</h3>
									<span>嘎嘎好吃分享嘎嘎好吃的最热门美食菜谱</span>
									<p>本处分享热门菜谱排行榜，最热的菜的家常做法图片大全,菜怎么做好吃,家常菜的最简单制作方法等菜谱相关信息,让初学者也能烹饪出好味道。</p>
									<ul>
										<li v-for="f in hots">
											<a :href="'single.html?id='+f.id">{{f.name}}  浏览量：{{f.viewsnum}}</a>
										</li>
									</ul>
									<a class="button" href="about.html">更多菜谱</a>
								</div>
								<div class="bottom-grid2 bottom-mid">
									<h3>今日推荐</h3>
									<span>嘎嘎好吃分享嘎嘎好吃的今日推荐美食菜谱</span>
									<p>本处分享今日推荐菜谱，推荐的菜的家常做法图片大全,菜怎么做好吃,家常菜的最简单制作方法等菜谱相关信息,让初学者也能烹饪出好味道。</p>
									<div class="gallery">
										<ul>
											<template v-for="d in dish">
												<li>
													<a :href="'single.html?id='+d.id"><img :src="d.image" alt=""></a>
												</li>
											</template>

											<div class="clear"> </div>
										</ul>										
								 </div>
								 <a class="button" href="about.html">更多菜谱</a>
							</div>
							<div class="bottom-grid1 bottom-last">
									<h3>最新菜谱</h3>
									<span>嘎嘎好吃分享嘎嘎好吃的今日推荐美食菜谱</span>
									<p>本处分享最新菜谱，推荐的菜的家常做法图片大全,菜怎么做好吃,家常菜的最简单制作方法等菜谱相关信息,让初学者也能烹饪出好味道。本处分享今日推荐菜谱，推荐的菜的家常做法图片大全,菜怎么做好吃,家常菜的最简单制作方法等菜谱相关信息,让初学者也能烹饪出好味道。</p>
								    <ul>
										<li v-for="e in news">
											<a :href="'single.html?id='+e.id">{{e.name}}   {{e.time.date.year}}-{{e.time.date.month}}-{{e.time.date.day}}</a>
										</li>
									</ul>
								<a class="button" href="about.html">更多菜谱</a>
								</div>
								<div class="clear"> </div>
							</div>
							<div class="clear"> </div>
	<!--end-wrap--->
	 </div>
		 </div>
		 <!---End-content---->
	<my-footer></my-footer>
		 <!---start-footer---->
</div>
  <script>
	var v=new Vue({
		el : "#app",
		data : { dish : [],
			 hots : [],/*最热的6个菜品*/
			 news : []
		},

		created(){
			/**/
			axios.all([axios.get("queryDish.s"),axios.get("hot.s"),axios.get("new.s")]).then(axios.spread((res1,res2,res3)=>{
				this.dish=res1.data;
				this.hots=res2.data;
				this.news=res3.data;
			})
			)
			// axios.get("queryDish.s").then(res=>{
			// 	this.dish=res.data;
			// });
			// axios.get("hot.s").then(res=>{
			// 	this.hots=res.data;
			// });
			// axios.get("new.s").then(res=>{
			// 	this.new=res.data;
			// });
		},
		updated(){
			jQuery('#camera_wrap_1').camera({
				pagination: false,
			});

		}
	})

</script>

  </body>
</html>

